<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 走马灯效果</title>
<meta content="" name="description">
<script type="text/javascript" src="/j-tool/jquery.js"></script>
<script>
	function marquee()
	{
		var obj = $('#quee');
	    obj.css({
			  'margin-left' : function(index, value) 
			  {
				var width = $(this).children(':first').width();
				if(parseFloat(value) < - (width + 9))
				{
					$(this).children(':first').appendTo(this);
					return 0;
				}
				return parseFloat(value) - 1;//IE 下小于 1 像素无效果；
			  }
		})
	}

	jQuery(function($){
		$('#quee').width(1000);
		var taver = setInterval(marquee,15);
		$('.quee_box').hover(
			function(){clearInterval(taver)},
			function(){taver = setInterval(marquee,15);}
		)
	})

</script>
<style>
*{margin:0;padding:0;}
.quee_box{width: 665px;margin:0 auto;overflow:hidden;margin-top: 20px;border:1px solid #ccc;}
#quee{height:30px;}
#quee li{float:left;list-style:none;font-size:12px;line-height:30px;padding:0 5px;}
</style>
<body>
	<div class="quee_box">
		<ul id="quee">
			<li>西红柿</li><li>葡萄</li><li>鄂尔多斯和</li><li>水</li><li>巍峨高山</li><li>巍峨高山（1）</li><li>巍峨高山（2）</li><li>巍峨高山（3）</li><li>巍峨高山（4）</li><li>山水有相逢</li><li>又是我,早上好</li>
		</ul>
	</div>
</body>
</html>